<template>
  <ul
    role="list"
    :class="gridColumnClass"
    class="grid gap-x-4 gap-y-8 sm:gap-x-6 xl:gap-x-8"
  >
    <li v-for="item in items" :key="item.source" class="relative text-white">
      <p class="mt-2 block text-sm font-medium truncate pointer-events-none">
        {{ item.title }}
        <image-icon class="-mt-3 w-36" :image="BorderImage" />
      </p>
      <div
        class="
          mt-2
          group
          block
          w-full
          aspect-w-10 aspect-h-7
          rounded-lg
          bg-gray-100
          focus-within:ring-2
          focus-within:ring-offset-2
          focus-within:ring-offset-gray-100
          focus-within:ring-indigo-500
          overflow-hidden
        "
      >
        <!-- <img
          :src="item.source"
          alt=""
          class="object-cover pointer-events-none group-hover:opacity-75"
        /> -->
        <live-player :src="item.source" />
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, toRefs } from "vue";
import ImageIcon from "../icon/ImageIcon.vue";
import BorderImage from "../../assets/border.png";
import LivePlayer from "../video/LivePlayer.vue";

export interface ImageListItem {
  title: string;
  source: string;
}

// 列数与class名的对应
const columnClassMap: { [key: number]: string } = {
  1: "grid-cols-1",
  2: "grid-cols-2",
};

export default defineComponent({
  components: { ImageIcon, LivePlayer },
  props: {
    items: {
      type: Array as PropType<ImageListItem[]>,
    },
    // grid列数： 1， 2
    columns: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const { columns } = toRefs(props);

    const gridColumnClass = ref("");

    onMounted(() => {
      gridColumnClass.value = columnClassMap[columns.value];
    });

    return {
      BorderImage,
      columnClassMap,
      gridColumnClass,
    };
  },
});
</script>
